如何让超出块级元素的内容使用省略号代替?

2024-07-12 19:34| 来源: 网络整理| 查看: 265

先看上面两幅图片,如果实现上面现象该如何

.main{ width: 100px; border: 1px solid red; overflow: hidden; text-overflow: ellipsis; } 1111111111111111111111111111111111111111

必须overflow:hidden;和text-overflow:ellipsis组合才可以实现上述效果

overflow:clip|ellipsis|string 值解释 clip 修剪文本 ellipsis 显示省略符号来代表被修剪的文本 string 使用给定的字符串来代表被修剪的文本

难道这就完成了吗？那当然不是。如果我们内容有很多的话，但是我们只想在一行显示出来，并且多余的用省略号代替，可问题就是如果内容出现空格或连字符的话会自动换行那怎么办？先看看问题现象

使用同样的样式 .main{ width: 100px; border: 1px solid red; overflow: hidden; text-overflow: ellipsis; } 现在特别注意内容中间有空格 111111111111111111 1111111111111111111111

现在解决如果在一行显示,现在问题的出现就是她会自动换行，所以我们可以阻止默认换行,认识一个属性

white-space 值解释 ormal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。

我们使用white-space: nowrap,下来让我们再试试

```css .main{ width: 100px; border: 1px solid red; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html还是使用插入空格的那段,现在结果如下图 2016-06-17_024044.png

【本文地址】

公司简介

联系我们